<script setup lang="ts">
defineOptions({
    name: 'cs-artificial',
});

import { useEventListener } from '@vueuse/core';

const menuVisible = ref(false);
const menuPosition = reactive({ x: 0, y: 0 });
const menuRef = ref<HTMLElement>();

// 右键菜单处理
function handleRightClick(e: PointerEvent, item: any) {
    e.preventDefault();
    menuPosition.x = e.clientX;
    menuPosition.y = e.clientY;
    menuVisible.value = true;
}

// 点击外部关闭菜单
useEventListener(window, 'click', (e) => {
    if (!menuRef.value?.contains(e.target as Node)) {
        menuVisible.value = false;
    }
});
</script>

<template>
    <div class="w-[1100px] h-[600px] overflow-x-hidden rounded-xl bg-white">
        <div class="h-full w-full overflow-y-auto">
            <div class="grid h-full w-full grid-cols-[auto_1fr_auto]">
                <!-- 会话列表 -->
                <div class="h-full overflow-y-auto overflow-x-hidden w-[350px] border-r p-2">
                    <div
                        v-for="item in 20"
                        class="p-2 mb-2"
                        :class="{ active: item === 1 }"
                        @contextmenu.prevent="handleRightClick($event as PointerEvent, item)"
                    >
                        <div class="flex items-center">
                            <div class="flex items-center">
                                <div class="shrink-0">
                                    <el-badge :value="99">
                                        <el-avatar>
                                            <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
                                        </el-avatar>
                                    </el-badge>
                                </div>
                            </div>
                            <div class="flex-1 ml-3 min-w-0">
                                <div class="flex items-center justify-between">
                                    <span class="text-lg truncate">kene</span>
                                    <span class="text-sm text-gray-400 shrink-0">2025-4-24</span>
                                </div>
                                <div class="truncate text-sm text-gray-600">hello-world,hello-world,hello-world</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 聊天区域 -->
                <div class="grid grid-rows-[auto_1fr_auto] overflow-y-hidden">
                    <div class="flex !h-[50px] items-center border-b px-2">kene</div>
                    <div class="h-full overflow-y-auto overflow-x-hidden p-4">
                        <div v-for="i in 20">{{ i }}</div>
                    </div>
                    <div class="flex !h-[230px] items-center border-t px-2">消息输入框</div>
                </div>
            </div>
        </div>

        <!-- 右键菜单 -->
        <div
            v-show="menuVisible"
            ref="menuRef"
            class="fixed z-50 bg-white shadow-lg rounded-md min-w-[120px] py-1"
            :style="{
                left: `${menuPosition.x}px`,
                top: `${menuPosition.y}px`,
            }"
        >
            <div class="px-4 py-2 hover:bg-gray-100 cursor-pointer">置顶会话</div>
            <div class="px-4 py-2 hover:bg-gray-100 cursor-pointer text-red-500">删除会话</div>
            <div class="border-t my-1" />
            <div class="px-4 py-2 hover:bg-gray-100 cursor-pointer">取消</div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.active {
    border-left: 5px #409eff solid;
    background-color: #c1c1c1;
}
</style>
